
export const state = () => ({
  // 侧边菜单栏被点击菜单
  menuActiveName: '',
  // 用户关联的’页面‘菜单对象列表
  pageMenuList: undefined,
  // 用户关联的’权限‘字符串列表
  permitList: [],
  /**
   * 用户点击打开的所有页面对应的菜单标签列表
   * 数组存储数据的格式为：{ 'menuId': 'xxx', 'name': '/xxx/xxx/xxx', 'title': 'xxx', 'params': 对象, 'query': 对象},
   * 如：
   *  {menuId: '83C38AB1CC8ADB72DBEE9AED2EA649DD', path: '/admin/system/user', title: '用户管理', params: {}, query: {}}
   */
  menuTabs: [],
  // 缓存的页面列表（默认缓存后台首页面数据，后台首页面的name属性值为’admin-index‘）
  cachePages: ['admin-index'],
})

export const mutations = {
  /**
   * 设置选中的侧边菜单项
   * @param {Object} state          菜单的Vuex-state对象
   * @param {String} menuActiveName 当前选中的侧边菜单项
   */
  setMenuActiveName(state, menuActiveName) {
    state.menuActiveName = menuActiveName
  },
  /**
   * 设置用户关联的’页面‘菜单对象列表
   * @param {Object} state    菜单的Vuex-state对象
   * @param {Array}  pageMenuList 用户关联的’页面‘菜单列表
   */
  setPageMenuList(state, pageMenuList) {
    state.pageMenuList = pageMenuList
  },
  /**
   * 设置用户关联的’权限‘字符串列表
   * @param {Object} state      菜单的Vuex-state对象
   * @param {Array}  permitList 用户关联的’权限‘字符串列表
   */
  setPermitList(state, permitList) {
    state.permitList = permitList
  },
  /**
   * 设置菜单tab值
   * @param {Object} state    菜单的Vuex-state对象
   * @param {Array} menuTabs 最新的菜单tab数组
   */
  setMenuTab(state, menuTabs) {
    state.menuTabs = menuTabs
  },
  /**
   * 添加一个菜单标签数据
   * @param {object} state   菜单的Vuex-state对象
   * @param {object} menuTab 菜单标签数据对象
   */
  addMenuTabOnMiss(state, menuTab) {
    // console.log('菜单记录列表', state.menuTabs);
    if (!state.menuTabs.some(menuTabObj => menuTabObj.menuId === menuTab.menuId)) {
      // 菜单tabs新增菜单
      state.menuTabs.push(menuTab)
      // 页面缓存新增页面
      /**
       * menuTab.path.substr(1) ：去除第一个字符‘/’
       * replaceAll("/", "-") ：将所有字符‘/’转化为字符’-‘，与组件的name属性值一致
       */
      state.cachePages.push(menuTab.path.substring(1).replaceAll("/", "-"))
    }
  },
  /**
   * 删除一个菜单标签数据
   * @param {object} state   菜单的Vuex-state对象
   * @param {string} tabName 菜单标签的name属性值
   */
  removeMenuTab(state, tabName) {
    let length = state.menuTabs.length
    let index = 0;
    for (let i = 0; i < length; i++) {
      if (state.menuTabs[i].path === tabName) {
        index = i;
        break
      }
    }
    // 删除index下标对应的菜单tab数据
    state.menuTabs.splice(index, 1)

    // 删除index + 1 下标对应的页面缓存数据
    state.cachePages.splice(index + 1, 1)

    if (length > 1) {
      // 如果删除的是正在显示的页面，则切换显示的页面
      if (state.menuActiveName === tabName) {
        // 如果删除的是最后一个菜单tab，则显示器前一个菜单tab，否则显示其后一个菜单tab
        index = index + 1 === length ? index - 1 : index;

        state.menuActiveName = state.menuTabs[index].path
      }
    } else {
      // 删除唯一一个菜单tab
      state.menuActiveName = '/admin'
    }
  },
  /**
   * 1、删除所有菜单标签数据，除了当前显示页面对应得菜单标签以外
   * 2、删除所有页面缓存数据，除了当前当前‘显示的页面’和‘首页页面’以外
   * @param {object} state 菜单的Vuex-state对象
   */
  removeOtherMenuTabOnMenuTab(state) {
    // 删除其他菜单tab
    state.menuTabs = state.menuTabs.filter(menuTab => menuTab.path === state.menuActiveName)
    // 路由键转换成组件name值
    let value = state.menuActiveName.substr(1).replaceAll("/", "-")
    // 删除其他页面缓存
    state.cachePages = state.cachePages.filter(path => path === value)
    // 保持首页页面被缓存
    state.cachePages.push('admin-index')
  },
  /**
   * 1、删除所有菜单标签数据
   * 2、删除所有页面缓存数据，除了‘首页’页面以外
   * @param {object} state 菜单的Vuex-state对象
   */
  removeAllMenuTag(state) {
    // 清空菜单tab数据
    state.menuTabs = []
    // 清空页面缓存数据
    state.cachePages = ['admin-index']
    // 设置跳转的页面到‘首页’
    state.menuActiveName = '/admin'
  },
  /**
   * 设置页面缓存列表
   * @param {Object} state     菜单的Vuex-state对象
   * @param {Array} cachePages 菜单的Vuex-state对象
   */
  setCachePages(state, cachePages) {
    state.cachePages = cachePages
  }
}

